<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { storage } from '../stores/mystore/auth'

// Banner图片（可替换为实际图片地址）
const banners = ref([])

// TAB数据
const tabs = [
  { id: 1, name: '闲鱼' },
  { id: 2, name: '抖音Y' },
  { id: 3, name: '小红书' },
  { id: 4, name: '视频号' },
  { id: 5, name: '快手' },
]
const activeTab = ref(0)

// 每个TAB的独立数据管理
const goodsArr = ref([
  [], // 闲鱼
  [], // 抖音
  [], // 小红书
  [], // 视频号
  [], // 快手
])

// 每个TAB的独立分页参数管理
const tabParams = ref([
  { type: 0, page: 1, pageSize: 10, total: 0 }, // 闲鱼
  { type: 1, page: 1, pageSize: 10, total: 0 }, // 抖音
  { type: 2, page: 1, pageSize: 10, total: 0 }, // 小红书
  { type: 3, page: 1, pageSize: 10, total: 0 }, // 视频号
  { type: 4, page: 1, pageSize: 10, total: 0 }, // 快手
])

// 每个TAB的loading和finished状态
const loadingArr = ref([false, false, false, false, false])
const finishedArr = ref([false, false, false, false, false])

// 每个TAB的下拉刷新状态
const refreshingArr = ref<boolean[]>([false, false, false, false, false])

// 每个TAB的商品总数
const tabCounts = ref([0, 0, 0, 0, 0])

const router = useRouter()

onMounted(() => {
  // 初始化第一个TAB的数据
  initTabData(0)
  // 初始化
  getBanners()
})

async function getBanners() {
  const res = await request.post('/dragon/getImageList', { bucketName: 'banners', pageSize: 9999, currentPage: 1 })
  // console.log('getImageList', res)
  banners.value = res.data.map(item => ({
    img: `https://julong666.com:9001/${item.bucketName}/${item.fileName}`,
  }))
}

// 初始化TAB数据
async function initTabData(tabIndex: number) {
  // 重置该TAB的分页参数
  tabParams.value[tabIndex] = {
    type: tabIndex,
    page: 1,
    pageSize: 10,
    total: 0,
  }

  // 重置加载状态
  loadingArr.value[tabIndex] = false
  finishedArr.value[tabIndex] = false
  refreshingArr.value[tabIndex] = false // 重置下拉刷新状态

  // 清空该TAB的商品数据
  goodsArr.value[tabIndex] = []

  // 获取总数和第一页数据
  await getProductCount(tabIndex)
  await getProductList(tabIndex)
}

// 下拉刷新处理函数
async function onRefresh(tabIndex: number) {
  try {
    // 重置分页参数
    tabParams.value[tabIndex] = {
      type: tabIndex,
      page: 1,
      pageSize: 10,
      total: 0,
    }

    // 重置加载状态
    finishedArr.value[tabIndex] = false
    goodsArr.value[tabIndex] = []

    // 获取最新数据
    await getProductCount(tabIndex)
    await getProductList(tabIndex)

    // 显示刷新成功提示
    // showToast('刷新成功')
  }
  catch (error) {
    console.error(`TAB ${tabIndex} 刷新失败:`, error)
    // showToast('刷新失败，请重试')
  }
  finally {
    // 停止下拉刷新动画
    refreshingArr.value[tabIndex] = false
  }
}

async function getProductCount(tabIndex: number) {
  try {
    const currentParams = tabParams.value[tabIndex]
    const res = await request.post('/dragon/pCount', {
      product_type: currentParams.type, // 商品类型
      // pageSize: currentParams.pageSize,// 每页条数
      // currentPage: currentParams.page, // 当前页码
    })
    // console.log(`TAB ${tabIndex} 查询商品列表总数信息`, res.data)
    tabCounts.value[tabIndex] = res.data || 0
    tabParams.value[tabIndex].total = res.data || 0
  }
  catch (error) {
    // console.error(`TAB ${tabIndex} 获取商品列表总数失败:`, error)
  }
}

function uniqueGoodsArr() {
  // 遍历 goodsArr 的每个子数组（对应每个 TAB 的数据）
  goodsArr.value = goodsArr.value.map((tabGoods) => {
    // 用于存储已出现过的对象的字符串化结果（作为唯一标识）
    const seen = new Set<string>()
    // 过滤出不重复的对象
    return tabGoods.filter((item) => {
      // 将对象转为字符串（所有属性完全相同时，字符串也完全相同）
      const itemStr = JSON.stringify(item)
      // 如果未出现过，则添加到 Set 并保留该对象；否则过滤掉
      if (!seen.has(itemStr)) {
        seen.add(itemStr)
        return true
      }
      return false
    })
  })
}

// 查询列表
async function getProductList(tabIndex: number) {
  try {
    const currentParams = tabParams.value[tabIndex]
    const res = await request.post('/dragon/pList', {
      product_type: currentParams.type, // 商品类型
      pageSize: currentParams.pageSize, // 每页条数
      currentPage: currentParams.page, // 当前页码
    })
    // console.log(`TAB ${tabIndex} 查询信息`, res)

    if (res.code === 200 && res.msg === '查询成功') {
      const processedData = res.data.map((item: any) => ({
        id: item.id, // 商品ID
        authority: item.product_authority, // 商品权限
        create_tm: item.product_create_tm, // 商品创建时间
        name: item.product_name, // 商品名字
        desc: item.product_desc, // 商品描述
        discount: item.product_discount, // 商品折扣
        img_url: item.product_img_url, // 商品图片
        pay: item.product_pay, // 商品付款人数
        price: item.product_price, // 商品价格
        racking: item.product_racking, // 商品是否上架
        tag_desc1: item.product_tag_desc1, // 商品标签描述1
        tag_desc2: item.product_tag_desc2, // 商品标签描述2
        tag_desc3: item.product_tag_desc3, // 商品标签描述3
        type: item.product_type, // 商品分配
        update_tm: item.product_update_tm || '', // 商品更新时间
        stock: item.stock || 0, // 库存
      }))
      // console.log('processedData', processedData)
      goodsArr.value[tabIndex].push(...processedData) // 添加新数据到对应TAB
      tabParams.value[tabIndex].page += 1 // 更新页码

      // 检查是否加载完毕
      const currentTotal = goodsArr.value[tabIndex].length
      const maxTotal = tabCounts.value[tabIndex]
      const totalPages = maxTotal > 0 ? Math.ceil(maxTotal / currentParams.pageSize) : 0 // 总页数
      const currentPage = currentParams.page // 当前请求的页码（未+1前）

      // 满足以下任一条件则终止加载：
      // 1. 总数量为0；2. 当前页已超过总页数；3. 当前页无数据且不是第一页
      const isFinished
        = maxTotal === 0
          || currentPage > totalPages
          || (processedData.length === 0 && currentPage > 1)

      if (isFinished) {
        finishedArr.value[tabIndex] = true
      }

      uniqueGoodsArr() // 去重查询到的数据
      // console.log(`TAB ${tabIndex} goodsArr`, goodsArr.value[tabIndex])
      // console.log(`TAB ${tabIndex} 当前加载: ${currentTotal}, 总数: ${maxTotal}`)
    }
    else {
      // 接口返回成功但状态不正确（如 code 不是 200），直接终止加载
      finishedArr.value[tabIndex] = true
    }
  }
  catch (error) {
    console.error(`TAB ${tabIndex} 获取商品列表失败:`, error)
    // 关键：请求失败时强制终止加载，避免无限循环
    finishedArr.value[tabIndex] = true
  }
  finally {
    loadingArr.value[tabIndex] = false
  }
}

function goDetail(item: any) {
  // console.log("item",item)
  router.push({ name: 'goods-detail', params: { id: item.id }, query: { ...item } })
}

function onTabChange(tabIndex: number) {
  // console.log("当前的TAB页index", tabIndex)

  // 如果该TAB还没有数据，则初始化数据
  if (goodsArr.value[tabIndex].length === 0) {
    initTabData(tabIndex)
  }
}

// 滚动到底部时触发的固定函数
function onLoad(tabIndex: number) {
  // console.log(`TAB ${tabIndex} 滚动到底部，触发加载更多`)

  // 设置加载状态
  loadingArr.value[tabIndex] = true

  // 加载下一页数据
  getProductList(tabIndex)
}
</script>

<template>
  <div class="home-container">
    <!-- 顶部banner -->
    <div class="banner-box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, idx) in banners" :key="idx" class="swipe-item">
          <img :src="item.img" class="banner-img">
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- TAB标签始终固定 -->
    <div class="tabs-fixed">
      <van-tabs v-model:active="activeTab" sticky @change="onTabChange">
        <van-tab v-for="(tab, tabIndex) in tabs" :key="tab.id" :title="tab.name">
          <!-- 下拉刷新区域 -->
          <van-pull-refresh
            v-model="refreshingArr[tabIndex]"
            :disabled="refreshingArr[tabIndex]"
            @refresh="() => onRefresh(tabIndex)"
          >
            <!-- 商品列表滚动区域 -->
            <div class="goods-scroll-area">
              <van-list
                v-model:loading="loadingArr[tabIndex]"
                :finished="finishedArr[tabIndex]"
                finished-text="没有更多了"
                @load="() => onLoad(tabIndex)"
              >
                <div class="goods-list">
                  <div
                    v-for="item in goodsArr[tabIndex]"
                    :key="item.id"
                    class="goods-card"
                    @click="goDetail(item)"
                  >
                    <div class="goods-img-box">
                      <img :src="item.img_url" class="goods-img">
                    </div>
                    <div class="goods-info">
                      <div class="goods-title">
                        {{ item.name }}
                      </div>
                      <div class="goods-row">
                        <span class="goods-price">{{ item.price }}元</span>
                        <span class="goods-sales">{{ item.pay }}人付款</span>
                      </div>
                      <div class="goods-tags-row">
                        <span v-if="item.tag_desc1" class="goods-tag quality">{{ item.tag_desc1 }}</span>
                        <span v-if="item.tag_desc2" class="goods-tag stock">{{ item.tag_desc2 }}</span>
                        <span v-if="item.tag_desc3" class="goods-tag count">{{ item.tag_desc3 }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
  background: #f7f7fa;
  display: flex;
  flex-direction: column;
}
.banner-box {
  background: #eaf3ff;
  margin: 0 0 0px 0;
  padding: 0px; /* 四周统一5px padding */
  border-radius: 0; /* 移除容器圆角 */
  overflow: hidden; /* 确保图片不溢出 */
}
.my-swipe {
  border-radius: 0; /* 移除轮播容器圆角 */
}
.swipe-item {
  padding: 2px; /* 为每个轮播项添加内边距 */
  box-sizing: border-box; /* 确保padding不影响总尺寸 */
}
.banner-img {
  width: 100%;
  height: 20%;
  object-fit: contain; /* 完整显示图片 */
  border-radius: 0; /* 移除图片圆角 */
  display: block; /* 避免图片底部间隙 */
}
.tabs-fixed {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.goods-scroll-area {
  flex: 1;
  overflow-y: auto;
  height: calc(100vh - 120px);
  -webkit-overflow-scrolling: touch;
  background: #f7f7fa;
}
.goods-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}
.goods-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
}
.goods-img-box {
  width: 100%;
  height: 65%;
  position: relative;
  background: #f5f5f5;
}
.goods-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px 10px 8px 10px;
}
.goods-title {
  font-size: 10px;
  font-weight: 500;
  color: #222;
  margin-bottom: 6px;
  line-height: 1.2;
  min-height: 1.5em;
}
.goods-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.goods-price {
  color: #ee0a24;
  font-size: 14px;
  font-weight: bold;
}
.goods-sales {
  font-size: 10px;
  color: #b0b0b0;
  margin-left: 4px;
}
.goods-tags-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.goods-tag {
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 6px;
  font-weight: 500;
  display: inline-block;
}
.goods-tag.quality {
  background: #222;
  color: #fff;
}
.goods-tag.stock {
  background: #19be6b;
  color: #fff;
}
.goods-tag.count {
  background: #ff7043;
  color: #fff;
}
</style>

<route lang="json5">
{
  name: 'home',
  meta: {
    title: '主页',
    i18n: 'menus.home'
  },
}
</route>
